<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="hjb2722404, hjb2722404@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <title>canvas动画之黑客帝国动画</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas" style="background: #000;"></canvas>
    <script>
        window.onload = function(){
            var canvas = document.querySelector('canvas'),
                    context = canvas.getContext("2d"),
                    w, h;
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;

            //初始化

            var clearColor = 'rgba(0, 0, 0, .1)',
                    wordColor = "#3f3",
                    words = "0123456789qwertyuiop[]\asdfghjkl;'zxcvbnm,./QWERTYUIOP{}ASDFGHJKL:ZXCVBNM<>?",
                    wordsArr = words.split(''),
                    fontSize = 16,
                    clumns = w /fontSize,
                    drops = [];

            for(var i= 0; i<clumns; i++){
                drops[i] = 1;
            }

            function draw(){
                context.save();
                context.fillStyle = wordColor;
                context.font = fontSize + 'px arial';

                //核心
                for(var i=0; i<drops.length; i++){
                    var text = wordsArr[Math.floor(Math.random()*wordsArr.length)];
                    context.fillText(text, i*fontSize, drops[i] * fontSize);
                    if(drops[i] * fontSize > h && Math.random() > 0.98){
                        drops[i] = 0;
                    }
                    drops[i]++;
                }
                context.restore();
            }

            (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.fillStyle = clearColor;
                context.fillRect(0 ,0, w, h);

                draw();
            }());

            function resize(){
                w = canvas.width = window.innerWidth;
                h = canvas.height = window.innerHeight;
            }

            canvas.addEventListener("resize", resize);
        }
    </script>
</body>
</html>